<template>
  <div class="category-box">
    <div class="left">
      <div class="left-category left-tag">
<!--        <span class="category-title">Word模板分类：</span>-->
        <ul>
          <li
              v-for="(item, index) in categoryList"
              :key="index"
              :class="[{ active: currentCategoryName === item.categoryName }]"
              @click="handleSelect(item)"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <!--      <div class="left-category left-tag">-->
      <!--        <span class="category-title">标签分类：</span>-->
      <!--        <ul>-->
      <!--          <li-->
      <!--            v-for="(item, index) in tagsList"-->
      <!--            :key="index"-->
      <!--            :class="[{ 'tag-active': currentTagName === item.name }]"-->
      <!--            @click="handleTagsSelect(item)"-->
      <!--          >-->
      <!--            {{ item.name }}-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
    </div>
    <div class="input-box right">
      <input type="text" placeholder="" v-model="currentQuery" @keyup.enter="handleQuerySelect" class="input"/>
      <span class="span" @click="handleQuerySelect">搜</span>
    </div>
    <!-- 右侧筛选 -->
<!--    <div class="right">-->
<!--      <div :class="['sort-box', { active: currentSort === 'createTime' }]" @click="handleSort('createTime')">-->
<!--        <svg-icon-->
<!--            icon-name="icon-shijian"-->
<!--            class-name="juejin"-->
<!--            size="20px"-->
<!--            :color="currentSort === 'createTime' ? '#018060' : '#ccc'"-->
<!--        ></svg-icon>-->
<!--        <span>时间</span>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(['getTemplateListByCate']);

defineProps<{
  categoryList: Array<{
    categoryName: string;
    categoryId: string;
  }>;
}>();

const currentSort = ref<string>(''); // 选中的分类

const currentQuery = ref<string>(''); // 选中的标签

// 点击分类
const currentCategoryName = ref<string>('全部');
const currentCategoryId = ref<string>('');
const handleSelect = (item: any) => {
  currentCategoryId.value = item.categoryId;
  currentCategoryName.value = item.categoryName;
  let queryParams = {
    categoryId: item.categoryId,
    //sort: currentSort.value,
    //tagId: item.tagId,
    currentQuery: currentQuery.value
  };
  emit('getTemplateListByCate', queryParams);
};
const handleQuerySelect = () => {
  let queryParams = {
    categoryId: currentCategoryId.value,
    currentQuery: currentQuery.value
  };
  emit('getTemplateListByCate', queryParams);
};


const handleSort = (value: string) => {
  if (currentSort.value) {
    currentSort.value = '';
  } else {
    currentSort.value = value;
  }

  let queryParams = {
    categoryId: currentCategoryId.value,
    sort: currentSort.value
  };
  emit('getTemplateListByCate', queryParams);
};
</script>
<style lang="scss" scoped>
.category-box {
  width: 100%;
  display: flex;
  // min-height: 100px;
  background-color: #fff;
  justify-content: space-between;
  padding: 10px 12px 0 12px;

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 13px;
    color: #333;

    .left-category {
      display: flex;
      align-items: flex-start;
      margin: 10px 0;

      .category-title {
        margin-right: 20px;
        width: 100px;
        display: flex;
        justify-content: flex-end;
        flex-shrink: 0;
      }

      ul {
        display: flex;

        li {
          list-style: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-right: 20px;
          transition: all 0.3s;
          border: 1px solid transparent;
          user-select: none;

          &:hover {
            color: green;
          }
        }

        .active {
          color: green;
          border-bottom: 1px solid green;
        }
      }
    }

    .left-tag {
      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          list-style: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-right: 20px;
          transition: all 0.3s;
          border: 1px solid #31eba6;
          border-radius: 20px;
          padding: 4px 6px;
          user-select: none;
          margin-bottom: 10px;

          &:hover {
            color: green;
            border-color: green;
          }
        }

        .tag-active {
          color: green;
          border-color: green;
        }
      }
    }
  }

  .right {
    display: flex;
    align-items: flex-start;
    padding: 0 5px 0 0;

    .sort-box {
      margin-left: 10px;
      display: flex;
      align-items: center;
      color: rgb(181, 181, 181);
      cursor: pointer;
      transition: all 0.3s;
      font-size: 14px;
      user-select: none;

      span {
        margin-left: 2px;
        width: 30px;
      }
    }

    .active {
      color: #018060;
    }
  }
}

.input-box {
  position: relative;
  display: inline-block;
  bottom: 4px;
}
.input  {
  padding: 0 40px 0 20px;
  width: 160px;
  height: 38px;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 40px;
  background: #eee;
  transition: width .5s;
  transition-delay: .1s;
}

.span {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  color: #969696;
  text-align: center;
  background: #222;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}

.input:focus {
  width: 230px;
  outline: none;
  box-shadow: none;
}

.input:focus+.span {
  background-color: pink;
  color: #fff;
}

</style>
